<template>
  <div>
    <mx-link
      v-if="obj.is_top != 1"
      class="item news click"
      :to="`${NEWS_PAGE_PATH_MAP[obj.news_type || obj.newsType]}/${
        obj.newsId || obj.news_id
      }`"
      target="_blank"
    >
      <div>
        <t-image
          :src="obj.thumbs && obj.thumbs[0]"
          alt=""
          class="cover img-cover mr-16"
          :class="{
            'vlog-cover': (obj.news_type || obj.newsType) == NEWS_TYPE.VLOG
          }"
        />
      </div>

      <icon
        v-if="(obj.news_type || obj.newsType) != NEWS_TYPE.ARTICLE"
        class="video-btn"
        size="40px"
        name="ic_play"
      />
      <div>
        <p v-if="!isHighLight" class="title ov-2">
          {{ obj.title }}
        </p>
        <p
          v-if="isHighLight"
          class="title ov-2"
          v-html="highLight(obj.title)"
        ></p>
        <p v-if="obj.tags && obj.tags.length > 0" class="ov-1 tag">
          {{ obj.tags | tagFilter }}
        </p>
        <div class="detail news-detail">
          <p class="name mr-4">{{ obj.author }}</p>
          <icon
            v-if="obj.is_bigv"
            class="mr-4"
            size="12px"
            name="ic_big_v_yellow"
          />
          <p class="time">
            · {{ (obj.release_timestamp || obj.releaseTime) | duration }}
          </p>
        </div>
      </div>
    </mx-link>
  </div>
</template>

<script>
import { NEWS_TYPE, NEWS_PAGE_PATH_MAP } from '@/constants/index';

export default {
  props: {
    obj: {
      type: Object,
      default: () => {}
    },
    // 是否展示标签
    showTag: {
      type: Boolean,
      default: false
    },
    // 搜索页面需要高亮匹配项
    isHighLight: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      NEWS_TYPE,
      NEWS_PAGE_PATH_MAP
    };
  },

  methods: {
    highLight(val) {
      if (!val) return '';
      const keyword = this.$store.state.app.searchContent;
      if (val.includes(keyword) && keyword !== '') {
        return val.replace(
          keyword,
          `<span style="color:#FD4B49;font-weight: 500;">${keyword}</span>`
        );
      }

      return val;
    }
  }
};
</script>

<style lang="scss" scoped>
.high-light {
  color: #fd4b49;
  font-weight: 500;
}

.top {
  width: 712px;
  height: 74px;
  padding: 12px 16px;

  .title {
    font-size: 20px;
    color: #0c0c1c;
    letter-spacing: 0;
    line-height: 32px;
    margin-bottom: 2px;
  }
}

.news {
  width: 712px;
  height: 165px;
  padding: 24px 16px;
  display: flex;
  position: relative;

  .cover {
    width: 208px !important;
    height: 117px;
    border: 0.5px solid rgba(42, 60, 88, 0.1);
    border-radius: 8px;
  }

  .vlog-cover {
    width: 208px;
    padding: 0 71px 0 71px;
    height: 117px;
    background: #000;
    border-radius: 8px;
  }

  .title {
    font-size: 20px;
    color: #0c0c1c;
    letter-spacing: 0;
    line-height: 32px;
    font-weight: 500;
    margin-bottom: 2px;
  }

  .tag {
    width: 456px;
    font-size: 12px;
    color: rgba(12, 12, 28, 0.7);
    letter-spacing: 0;
    line-height: 16px;
  }

  .news-detail {
    position: absolute;
    bottom: 24px;
  }

  .video-btn {
    position: absolute;
    left: 100px;
    top: 62px;
  }
}

.detail {
  display: flex;
  align-items: center;
  height: 16px;
  font-size: 12px;
  color: rgba(12, 12, 28, 0.5);
  letter-spacing: 0;
  line-height: 16px;

  .time {
    color: rgba(12, 12, 28, 0.5);
  }
}
</style>
